<template>
    <div class="addressmanage">
        <!-- ------------用户地址列表页----------- -->
        <div class="back-nav-box">
            <back-nav title="地址列表" left-text="返回" :right-text="editStatus?'删除':navRightText" left-arrow @clickRight='clickRight' @navback='navback'>
                
            </back-nav>
        </div>
        <!-- 蓝色底 -->
        <div class="blue-box"></div>
        <!-- 信息栏 -->
        <div class="userdata-msg">
            <ul>
                <li v-for="item in myAddress" :key="item.id">
                    <div class="userdata-msg-add">
                        <div class="userdata-msg-add-usermsg">
                            <span>{{item.name}}</span><span>{{item.tel}}</span>
                            <span class="userdata-msg-add-usermsg-def" v-if="item.isDefault">默认</span>
                        </div>
                        <div class="userdata-msg-add-address">{{item.addressDetail}}</div>
                    </div>
                    <!-- 编辑 -->
                    <div class="userdata-msg-icon">
                        <van-icon name="edit" @click="toEdit(item.aid)" v-if="editStatus"/>
                        <van-icon name="close" @click="delAddress(item.aid)" v-else/>
                    </div>
                </li>
            </ul>
        </div>

        <!-- 新增地址 -->
        <div class="addAddress"><van-button round type="info" @click="toNewaddress">新增地址</van-button></div>
    </div>
</template>

<script>
import { Dialog } from 'vant';//Dialog 是一个函数，调用后会直接在页面中弹出相应的模态框。
import BackNav from '../components/BackNav.vue'
    export default {
        data() {
            return {
                myAddress:[],//已添加的地址
                editStatus:true,
                navRightText:'取消'
            }
        },
        components:{BackNav},
        created() {
            this.findAddress();
        },
        methods: {
            // nav返回
            navback(){
                this.$router.push({name:'My'})
            },
            // 删除地址按钮
            delAddress(aid){
                 Dialog.confirm({
                    message: '确定删除该地址吗？',
                    }).then(() => {
                    // on close
                        this.axios({
                            method:'post',
                            url:'/deleteAddress',
                            data:{
                                aid
                            }
                        }).then(res=>{
                            console.log('deleteAddress res=>',res);
                        
                            this.$toast({message:res.data.msg})
                            // 重新渲染页面
                            setTimeout(()=>{
                            this.findAddress();
                            },1000)
                            }).catch(err=>{
                                console.log('err',err);
                            })
                    }).catch(() => {
                    // on cancel
                });; 
                this.navRightText='完成'

            },
            // 点击nav右边 编辑按钮
            clickRight(){
                this.navRightText="取消"
                this.editStatus=!this.editStatus
            },
            // 跳转
            toNewaddress(){
                this.$router.push({name:'Newaddress'})
            },
            // 查询地址 接口
            findAddress(){
                this.axios({
                    method:'get',
                    url:'/findAddress',
                }).then(res=>{
                    console.log('findAddress res=>',res);
                    if(res.data.code===20000){
                        this.myAddress=res.data.result
                    }
                        console.log('this.myAddress',this.myAddress);
                }).catch(err=>{
                    console.log('err',err);
                })
            },
            // 跳转到编辑
            toEdit(aid){
                this.$router.push({name:'Editaddress',query:{aid}})
            }
        },
    }
</script>

<style lang="less" scoped>
    // 信息栏
    .userdata-msg{
        width: 350px;
        height: 350px;
        position: relative;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        position: fixed;
        top: 160px;
        left: 12.5px;
        background-color: #fff;
        padding: 10px;
        padding-bottom: 0px;
        box-sizing: border-box;
            li{
                width: 100%;
                height: 65px;
                border-bottom: 1px solid #c7c7c7;
                display: flex;
                margin-bottom: 10px;
                .userdata-msg-add{
                    flex: 5;
                    .userdata-msg-add-usermsg{
                        font-size: 16px;
                        & span{
                            margin-left: 10px;
                        }
                        .userdata-msg-add-usermsg-def{
                            display: inline-block;
                            width: 40px;
                            font-size: 14px;
                            margin-left: 10px;
                           background-color: #0c34ba;
                           color: #fff;
                           text-align: center;
                           border-radius: 30px;
                        }
                    }
                    .userdata-msg-add-address{
                        font-size: 14px;
                        color: #666;
                        margin-top: 10px;
                        margin-left: 10px;
                    }
                }
                .userdata-msg-icon{
                    flex:1;
                    text-align: center;
                    line-height: 65px;
                    // background-color: aliceblue;
                }
            }

    }




// 新增地址
.addAddress{
    width: 100%;
    height: 50px;
    background-color: #fff;
    position: fixed;
    bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    .van-button{
        width: 90%;
        margin: 0 auto;
        background-color: #0c34ba;
    }
}
.addressmanage{
    min-height: 100vh;
    background-color: #f7f7f7;
}
 // 蓝色底
    .blue-box{
        width: 100%;
        height: 150px;
        background-color: #0c34ba;
    }
.back-nav-box{
        z-index: 9;
        position: sticky;
        top: 0;
    }
</style>